<template>
  <div class="dashboard">
    <el-row>
      <el-col :span="7">
        <el-card class="box-card-person" shadow="hover">
          <div class="text-center">
            <p>{{ personData.name }}</p>
            <p>{{ personData.age }}岁 | {{ personData.gender }}</p>
            <p>ID: {{ personData.id }}</p>
          </div>
        </el-card>
        <div class="health-info">
          <el-card class="box-card" shadow="hover" v-for="(value, key) in healthData" :key="key">
            <div class="text-center">
              <p>{{ keyLabel[key] }}: {{ value }}</p>
            </div>
          </el-card>
          <el-button type="primary" @click="openEditHealthInfoDialog" style="margin: 30px">修改健康信息</el-button>
          <el-button type="primary" @click="HealthInfo" style="margin: 30px">提交病症</el-button>
        </div>
      </el-col>

      <el-col :span="10" class="background-col">
        <button
            :class="{'active': isActive1}"
            @click="toggleButton(1)"
            :style="{ top: '10px', left: '220px' }"
        >头</button>
        <button
            :class="{'active': isActive2}"
            @click="toggleButton(2)"
            :style="{ top: '40px', left: '310px' }"
        >耳朵</button>
        <button
            :class="{'active': isActive3}"
            @click="toggleButton(3)"
            :style="{ top: '100px', left: '220px' }"
        >咽喉</button>
        <button
            :class="{'active': isActive4}"
            @click="toggleButton(4)"
            :style="{ top: '210px', left: '280px' }"
        >心脏</button>
        <button
            :class="{'active': isActive5}"
            @click="toggleButton(5)"
            :style="{ top: '210px', left: '200px' }"
        >肺</button>
        <button
            :class="{'active': isActive6}"
            @click="toggleButton(6)"
            :style="{ top: '290px', left: '240px' }"
        >肠胃</button>
        <button
            :class="{'active': isActive7}"
            @click="toggleButton(7)"
            :style="{ top: '340px', left: '380px' }"
        >手</button>
        <button
            :class="{'active': isActive8}"
            @click="toggleButton(8)"
            :style="{ top: '490px', left: '190px' }"
        >腿</button>
        <button
            :class="{'active': isActive9}"
            @click="toggleButton(9)"
            :style="{ top: '600px', left: '260px' }"
        >膝盖</button>
      </el-col>

      <el-col :span="7">
        <div class="person-info">
          <el-card class="box-card-person" shadow="hover">
            <div class="text-center">
              <h3>疾病状况</h3>
              <p v-for="condition in personData.conditions" :key="condition">{{ condition }}</p>
            </div>
          </el-card>
          <el-card class="box-card-person" shadow="hover">
            <div class="text-center">
              <h3>饮食禁忌</h3>
              <p v-for="restriction in personData.restrictions" :key="restriction">{{ restriction }}</p>
            </div>
          </el-card>
          <el-card class="box-card-person" shadow="hover">
            <div class="text-center">
              <h3>兴趣爱好</h3>
              <p v-for="preference in personData.preferences" :key="preference">{{ preference }}</p>
            </div>
          </el-card>
          <el-button type="primary" @click="openEditPersonInfoDialog" style="margin: 30px">修改人物信息</el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改健康信息" v-model="showEditHealthInfo">
      <el-form :model="editHealthData">
        <el-form-item label="最高血压">
          <el-input v-model="editHealthData.highestBloodPressure"></el-input>
        </el-form-item>
        <el-form-item label="最低血压">
          <el-input v-model="editHealthData.lowestBloodPressure"></el-input>
        </el-form-item>
        <el-form-item label="心率">
          <el-input v-model="editHealthData.heartRate"></el-input>
        </el-form-item>
        <el-form-item label="血氧">
          <el-input v-model="editHealthData.bloodOxygen"></el-input>
        </el-form-item>
        <el-form-item label="血糖">
          <el-input v-model="editHealthData.bloodSugar"></el-input>
        </el-form-item>
        <el-form-item label="体温">
          <el-input v-model="editHealthData.temperature"></el-input>
        </el-form-item>
        <el-form-item label="更新日期">
          <el-date-picker type="date" placeholder="更新日期" v-model="editHealthData.datasteps"></el-date-picker>

          <!--          <el-input v-model="editHealthData.datasteps"></el-input>-->
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: end">
        <el-button @click="closeEditHealthInfoDialog">取消</el-button>
        <el-button type="primary" @click="saveHealthData">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改人物信息" v-model="showEditPersonInfo">
      <el-form :model="editPersonData">
        <el-form-item label="姓名">
          <el-input v-model="editPersonData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editPersonData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="editPersonData.gender"></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input v-model="editPersonData.id"></el-input>
        </el-form-item>
        <el-form-item label="疾病状况">
          <el-input v-model="editPersonData.conditions"></el-input>
        </el-form-item>
        <el-form-item label="饮食禁忌">
          <el-input v-model="editPersonData.restrictions"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="editPersonData.preferences"></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: end">
        <el-button @click="closeEditPersonInfoDialog">取消</el-button>
        <el-button type="primary" @click="savePersonData">保存</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { showOldHealth } from '@/api/InforManage';

export default {
  data() {
    return {
      userId: '002562', // 假设用户ID为002562
      healthData: {},
      personData: {},
      editHealthData: {},
      editPersonData: {},
      showEditHealthInfo: false,
      showEditPersonInfo: false,
      keyLabel: {
        highestBloodPressure: '最高血压',
        lowestBloodPressure: '最低血压',
        heartRate: '心率',
        bloodOxygen: '血氧',
        bloodSugar: '血糖',
        temperature: '体温',
        datasteps: '更新日期'
      },
      isActive1: false,
      isActive2: false,
      isActive3: false,
      isActive4: false,
      isActive5: false,
      isActive6: false,
      isActive7: false,
      isActive8: false,
      isActive9: false,
      selectedValues: [],

    };
  },
  methods: {
    async fetchUserData(id) {
      try {
        const response = await showOldHealth(id);
        if (response && response.data) {
          const responseData = response.data;
          console.log("responseData.healthData:",responseData.healthData);
          console.log("responseData.personData:",responseData.personData);
          // this.healthData = responseData.healthData;
          // this.personData = responseData.personData;
          this.healthData = {
            highestBloodPressure: parseFloat(responseData.healthData.highest_blood_pressure),
            lowestBloodPressure: parseFloat(responseData.healthData.lowest_blood_pressure),
            heartRate: responseData.healthData.heart_rate,
            bloodOxygen: responseData.healthData.blood_oxygen,
            bloodSugar: responseData.healthData.blood_sugar,
            temperature: parseFloat(responseData.healthData.temperature),
            datasteps: responseData.healthData.record_date
          };

          this.personData = {
            name: responseData.personData.name,
            age: parseInt(responseData.personData.age, 10),
            gender: responseData.healthData.gender || '未知',
            id: responseData.personData.robert_id || '未知',
            conditions: responseData.healthData.conditions.split(', ').map(item => item.trim()),
            restrictions: responseData.healthData.restrictions.split(', ').map(item => item.trim()),
            preferences: responseData.healthData.preferences.split(', ').map(item => item.trim())
          };
          console.log("this.personData.conditions",this.personData.conditions);
        }
      } catch (error) {
        console.error('Failed to fetch user data:', error);
      }
    },
    openEditHealthInfoDialog() {
      this.editHealthData = { ...this.healthData };
      this.showEditHealthInfo = true;
    },
    closeEditHealthInfoDialog() {
      this.showEditHealthInfo = false;
    },
    HealthInfo(){
      console.log("this.selectedValues:", this.selectedValues); // 查看 this.selectedValues 的值
      const symptomMap = ["头疼", "耳朵疼", "咽喉疼", "心脏疼", "肺疼", "肠胃疼", "手疼", "腿疼", "膝盖疼"];
      const symptomNames = this.selectedValues.map(value => {
        if (Number.isInteger(value) && value > 0 && value <= symptomMap.length) {
          return symptomMap[value - 1];
        }
        return "未知病症";
      });
      const symptomString = "病症：" + symptomNames.join(", ");
      console.log(symptomString);
    },
    saveHealthData() {
      // 这里预留接口保存健康数据
      this.healthData = { ...this.editHealthData };
      this.showEditHealthInfo = false;
    },
    openEditPersonInfoDialog() {
      this.editPersonData = { ...this.personData };
      this.showEditPersonInfo = true;
    },
    closeEditPersonInfoDialog() {
      this.showEditPersonInfo = false;
    },
    savePersonData() {
      // 这里预留接口保存人物数据
      this.personData = { ...this.editPersonData };
      this.showEditPersonInfo = false;
    },
    toggleButton(buttonId) {
      if (buttonId === 1) {
        this.isActive1 = !this.isActive1;
        this.updateList(buttonId, this.isActive1);
      } else if (buttonId === 2) {
        this.isActive2 = !this.isActive2;
        this.updateList(buttonId, this.isActive2);
      }else if (buttonId === 3) {
        this.isActive3 = !this.isActive3;
        this.updateList(buttonId, this.isActive3);
      }else if (buttonId === 4) {
        this.isActive4 = !this.isActive4;
        this.updateList(buttonId, this.isActive4);
      }else if (buttonId === 5) {
        this.isActive5 = !this.isActive5;
        this.updateList(buttonId, this.isActive5);
      }else if (buttonId === 6) {
        this.isActive6 = !this.isActive6;
        this.updateList(buttonId, this.isActive6);
      }else if (buttonId === 7) {
        this.isActive7 = !this.isActive7;
        this.updateList(buttonId, this.isActive7);
      }else if (buttonId === 8) {
        this.isActive8 = !this.isActive8;
        this.updateList(buttonId, this.isActive8);
      }else if (buttonId === 9) {
        this.isActive9 = !this.isActive9;
        this.updateList(buttonId, this.isActive9);
      }

    },
    updateList(buttonId, isActive) {
      if (isActive) {
        this.selectedValues.push(buttonId);
      } else {
        const index = this.selectedValues.indexOf(buttonId);
        if (index > -1) {
          this.selectedValues.splice(index, 1);
        }
      }
      console.log("updateList",this.selectedValues);
    },
  },
  mounted() {
    const id = this.$route.params.id;
    if (id) {
      this.fetchUserData(id);
    }
  }
};
</script>

<style>
.dashboard {
  width: 90%;
  padding: 40px;
  margin: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.box-card {
  height: 70px;
}

.background-col {
  position: relative;
  width: 95%;
  height: 800px;
  background-image: url('@/assets/body.jpg');
  background-size: cover;
  background-position: center;
}

.background-col button {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #49aff2;
  color: white;
  border: 3px solid #FFEC8B;
  cursor: pointer;
  opacity: 0.7;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.background-col button.active {
  background-color: red; /* 激活状态 */
}


</style>
